<h2 class="headline-small">{{language.settings.tapZones.main}}</h2>

<div class="menu-simple-text gamepad-item">
	<span>{{language.settings.tapZones.disable}}</span>
	<div class="switch{{#if config.disableTapZones}} a{{/if}}" on="settings.set('disableTapZones', true)" off="settings.set('disableTapZones', false)">
		<div></div>
		<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
	</div>
</div>

<div class="menu-simple-text gamepad-item settings-invert-tap-zones-in-manga {{#if config.disableTapZones}} disable-pointer{{/if}}">
	<span>{{language.settings.tapZones.invertInManga}}</span>
	<div class="switch{{#if config.invertTapZonesInManga}} a{{/if}}" on="settings.set('invertTapZonesInManga', true)" off="settings.set('invertTapZonesInManga', false)">
		<div></div>
		<svg viewBox="0 0 52 32"><path d="M 8,0 C 3.58,0 0,3.58 0,8 0,12.42 3.58,16 8,16 8,16 8,16 8,16 12.42,16 16,12.42 16,8 16,3.58 12.42,0 8,0 8,0 8,0 8,0 Z"></path></svg>
	</div>
</div>

<table class="body-large full withoutThead settings-tap-zones{{#if config.disableTapZones}} disable-pointer{{/if}}">

	<tbody>
		{{#each tapZones}}
		<tr>
			{{#each this}}
			<td onclick="settings.changeTapZone({{@../index}}, {{@index}}, this)">
				<br>
				{{#each this}}
					{{{this}}}
					{{#unless @last}}<br><br>{{/unless}}
				{{/each}}
				<br><br>
			</td>
			{{/each}}
		</tr>
		{{/each}}
	</tbody>

</table>

<div class="simple-button filled-tonal gamepad-item" onclick="settings.restoreTapZones();">
	<div class="touch-effect"><i class="icon-24 material-icon">undo</i>{{language.settings.shortcuts.restoreDefaults}}</div>
</div>
<cb></cb>